{include file="public/header"}
 

    <style scoped>
        .el-select-dropdown {
        padding: 0;
        }
        .items-centers{
            display: flex;
            justify-content: center;
            font-size: 30px;
            line-height: 80px;
        }
     
    </style>
    {include file="public/style"}

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>首页</el-breadcrumb-item>
            <el-breadcrumb-item>数据列表</el-breadcrumb-item>
        </el-breadcrumb>
        <br>
       <el-card class="p-4" style="width: 95%" > 
            <div style="margin: 0 auto">             
               <div class="mt-4" style="border: 1px solid #e4e7ed; padding:20px">
                    <div class="relative">                 
                        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                            <el-form-item label="日期选择">
                                <el-select size="small" v-model="searchForm.date_range"  clearable filterable>
                                    <el-option v-for="(item,index) in dateRangeList" :value="item.value" :label="item.label"></el-option>
                                </el-select>
                            </el-form-item>        
                            <el-form-item label="店铺">
                                <el-select size="small" v-model="searchForm.shop_id"  clearable filterable>
                                <el-option v-for="(item,index) in shopList" :value="index" :label="item"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button size="small"  type="primary" >查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                       <el-divider></el-divider>
                       <!-- 数据看板 -->
                    <div class="flex justify-between">                        
                        <el-card   class="card-box relative" style="display: inline-block; width: 18%;height: 170px; " shadow="hover" >
                            <div style="color:#606266;  padding-left: 20%; font-size: 18px;">订单销量</div>
                            <div class="text-xl mt-2 flex items-center items-centers">
                                 500(单)  
                            </div>
                            <div class="flex justify-between  absolute bottom-2 px-4" style="width: 80%;margin-bottom: 20px;font-size: 15px;">
                                <div class="text-xs text-gray-500">总量<span >:1000</span>单</div>                  
                                <div class="text-xs text-gray-500">同比昨天:<span style="color:red"><i class="el-icon-top"></i>10%</span></div>
                            </div>
                        </el-card >

                        <el-card   class="card-box relative" style="display: inline-block; width: 18%;height: 170px; " shadow="hover" >
                            <div style="color:#606266;  padding-left: 20%; font-size: 18px;">营业额</div>
                            <div class="text-xl mt-2 flex items-center items-centers">
                                $500     
                            </div>
                            <div class="flex justify-between  absolute bottom-2 px-4" style="width: 80%;margin-bottom: 20px;font-size: 15px;">
                                <div class="text-xs text-gray-500">总量<span >:10000</span>$</div>                  
                                <div class="text-xs text-gray-500">同比昨天:<span style="color:red"><i class="el-icon-top"></i>10%</span></div>
                            </div>
                        </el-card >

                        <el-card   class="card-box relative" style="display: inline-block; width: 18%;height: 170px; " shadow="hover" >
                            <div style="color:#606266;  padding-left: 20%; font-size: 18px;">产品上架量</div>
                            <div class="text-xl mt-2 flex items-center items-centers">
                                2000     
                            </div>
                            <div class="flex justify-between  absolute bottom-2 px-4" style="width: 80%;margin-bottom: 20px;font-size: 15px;">
                                <div class="text-xs text-gray-500">总量<span >:1000</span></div>                  
                                <div class="text-xs text-gray-500">同比昨天:<span style="color:red"><i class="el-icon-top"></i>10%</span></div>
                            </div>
                        </el-card >

                        <el-card   class="card-box relative" style="display: inline-block; width: 18%;height: 170px; " shadow="hover" >
                            <div style="color:#606266;  padding-left: 20%; font-size: 18px;">库存件数</div>
                            <div class="text-xl mt-2 flex items-center items-centers">
                                1000件      
                            </div>
                            <div class="flex justify-between  absolute bottom-2 px-4" style="width: 80%;margin-bottom: 20px;font-size: 15px;">
                                <div class="text-xs text-gray-500">总量<span >:1000</span></div>                  
                                <div class="text-xs text-gray-500">同比昨天:<span style="color:red"><i class="el-icon-top"></i>10%</span></div>
                            </div>
                        </el-card >

                        <el-card   class="card-box relative" style="display: inline-block; width: 18%;height: 170px; " shadow="hover" >
                            <div style="color:#606266;  padding-left: 20%; font-size: 18px;">退款金额</div>
                            <div class="text-xl mt-2 flex items-center items-centers">
                                $50    
                            </div>
                            <div class="flex justify-between  absolute bottom-2 px-4" style="width: 80%;margin-bottom: 20px;font-size: 15px;">
                                <div class="text-xs text-gray-500">总量<span >:100</span>%</div>                  
                                <div class="text-xs text-gray-500">同比昨天:<span style="color:red"><i class="el-icon-top"></i>10%</span></div>
                            </div>
                        </el-card >                      
                    </div> 
                     <el-divider></el-divider>
                    <!-- 图形化展示 -->
                    <el-card>
                        <div class="flex mt-4">       
                             <div  style="height:500;width:50%; border: 1px solid #e4e7ed;margin: 20px 20px 0 0;">     
                                <div style="line-height: 30px; margin: 10px 0 20px 20px;">销售额</div>
                                <el-divider></el-divider>         
                                <div class="chart-left sale_trend_chart" style="height:400px;width:100%; "  ></div>
                            </div>                           
                            <div  style="height:500;width:50%; border: 1px solid #e4e7ed;margin: 20px 20px 0 0;">
                                  <div style="line-height: 30px; margin: 10px 0 20px 20px;">销售订单</div>
                                     <el-divider></el-divider>
                                <div class="chart-right sale_shop_rate" style="height:400px;width:100%; " ></div>                            
                            </div>
                        </div>
                    </el-card>    
                   <el-divider></el-divider>
                    <!-- 图形化展示 -->
                    <el-card>
                          <div class=" text-xl font-bold mb-2" style="color: #4f4f4f;padding: 20px;">订单列表</div>
                            <el-table :data="tablelist"   style="width: 100%;margin-bottom: 20px;"  border   >                                                    
                                <el-table-column   prop="orderid" label="订单号" min-width="170" align="center"> </el-table-column>   
                                <el-table-column   prop="shops_name" label="店铺名称" min-width="130"> </el-table-column> 
                                <el-table-column   prop="status"  label="订单状态" min-width="100" align="center"> </el-table-column>  
                                <el-table-column   prop="ordertime"  label="下单时间"  min-width="180" align="center"> </el-table-column>                  
                                <el-table-column   prop="weighttime"  label="发货时间"   min-width="180" align="center"> </el-table-column> 
                                <el-table-column   prop="lastestShiptime"  label="最晚发货时间"   width="180"  align="center"> </el-table-column>                             
                               
                            </el-table>
                            <!-- page -->
                            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="searchForm.pagenum" :page-sizes="[20,50,100, 150, 300,500,1000,2000]"
                                :page-size="searchForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
                            </el-pagination>  
                    </el-card>    
                    
                </div>
            </div>
        </el-card>
    
        

</div>

<script>
  new Vue({
      el: '#app',
      data: function () {
          return {     
            shopList:[],     
            dateRangeList:[                
                {
                    value: 1,
                    label: '今天'
                },
                {
                    value: 2,
                    label: '昨天'
                },
                {
                    value: 3,
                    label: '近7天'
                },
                {
                    value: 4,
                    label: '一个月'
                },
                {
                    value: 4,
                    label: '半年'
                }
            ],
            searchForm: {
                title: '',
                status: '1',
                pagenum: 1,
                pagesize: 20,      
            },
            tablelist:[],
            total:0,   
          }
          
      },
      mounted(){
        // this.getDatalist();
        this.sale_trend_chart();
        this.sale_shop_rate();        
      },
      methods: {   
        async getDatalist() {
            let loading = this.$loading({
                lock: true,
                text: '数据加载中···',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            const res = await axios.post('/admin/order/list', {params: this.searchForm})
            loading.close()
            if (res.status !== 1) {
                return this.$message.error(res.info);
            }
            this.total = res.info.total
            this.tablelist = res.info.list
        },

        handleSizeChange(newSize) {
            this.searchForm.pagesize = newSize
            this.getDatalist()
        },
        handleCurrentChange(newPage) {
            this.searchForm.pagenum = newPage
            this.getDatalist()
        },      
        handleClick(tab, event) {
            console.log(tab.name);
            this.searchForm.status=tab.name
            this.getDatalist();
        }, 
        //销量线型图     
        sale_trend_chart(){
            console.log('ds')
            this.$nextTick(async () => {
                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.querySelector('.sale_trend_chart'));
                // 指定图表的配置项和数据
                var option = {
                    "tooltip": {
                        "trigger": "axis"
                    },
                    "legend": {
                        "data": [
                            "销售额",
                        ]
                    },
                    "grid": {
                        "top": "10%",
                        "left": "5%",
                        "right": "5%",
                        "bottom": "3%",
                        "containLabel": true
                    },
                    "xAxis": [
                        {
                            "type": "category",
                            "data": ['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],
                            "axisTick": {
                                "alignWithLabel": true
                            }
                        }
                    ],
                    "yAxis": [
                        {
                            "type": "value",
                            "name": "销售额",
                            "nameLocation": "middle",
                            "nameTextStyle": {
                                "padding": [
                                    0,
                                    0,
                                    30,
                                    0
                                ],
                                "fontWeight": "bold",
                                "fontFamily": "Segoe-UI-Bold",
                                "fontSize": "13",
                                "color": "#232253"
                            }
                        },
                        {
                            "type": "value",
                            "name": "",
                            "nameLocation": "middle",
                            "nameTextStyle": {
                                "padding": [
                                    30,
                                    0,
                                    0,
                                    0
                                ],
                                "fontWeight": "bold",
                                "fontFamily": "Segoe-UI-Bold",
                                "fontSize": "13",
                                "color": "#232253"
                            },
                            "position": "right"
                        }
                    ],
                    "series": [
                        {
                            "name": "销售额",
                            "type": "line",
                            "smooth": true,
                            "data": [10,20,100,220,600,800,850,860,100,500],
                            "label": {
                                show: true,
                                formatter: (v) => {                                
                                    return v.value
                                }
                            }
                        },                                               
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true)
            })
        },  
          //订单销量的柱形图
        sale_shop_rate(){
            this.$nextTick(async () => {
                  // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.querySelector('.sale_shop_rate'));
            option = {
                dataset: {
                    source: [
                    ['amount', 'product'],
                    [ 110, '01月'],
                    [ 20, '02月'],
                    [ 460, '03月'],
                    [ 150, '04月'],
                    [ 360, '05月'],
                    [ 70, '06月'],
                    [ 90, '07月'],
                    [250, '08月'],
                    [ 300, '09月']
                    ]
                },
                grid: { containLabel: true },
                xAxis: {type: 'category'},
                yAxis: {name: '销售单量' },
                visualMap: {
                    orient: 'horizontal',
                    left: 'center',
                    min: 10,
                    max: 100,
                    text: ['高', '低'],
                    // Map the score column to color
                    dimension: 0,
                    inRange: {
                    color: ['#65B581', '#FFCE34', '#FD665F']
                    }
                },
                series: [
                    {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'product',
                        // Map the "product" column to Y axis
                        y: 'amount'
                    }
                    }
                ]
            };
                            // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option,true)
            })
        },
    
   },
    
  })
  </script>
  </body>
</html>
